<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pictures {
            width: 166px;
            height: 166px;
            background-color: #fff;
            border-radius: 50%;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <input type="file" id="imgfile" method="post" enctype="multipart/form-data">
    <button type="button" onclick="ToBase64();" style="width: 100px;height: 100px;">点击我！！！</button>
    <div class="pictures">
        <img src="" id="png">
    </div>
    <script>
        function ToBase64() {
            var img = document.getElementById('imgfile')
            console.log(img)
            var imgFile = new FileReader();
            var imgData;
            imgFile.readAsDataURL(img.files[0]);
            imgFile.onload = function() {
                imgData = imgFile.result; //base64数据  
                console.log(imgData);
                var png = document.getElementById("png");
                png.src = imgData;
            }
        }
    </script>
</body>

</html>